<template>
  <div class="webChatUrl">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="one.name"
                   :name="one.value"
                   v-for="(one,index) in menu" :key="index"></el-tab-pane>
      <configCompositionTwoWindowStyle :rightWidth="12" :height="100">
      <template slot="card">
        <div style="margin-right: 20px;" class="webChatUrlTable">
          <diyTable :tableHeader="tableHeader" :tableData="tableData" :isShow="isShow" :isShowConfig="true" :countTotal="countNum" v-loading="refreshLoading" @updata="updata" @del="del" @showConfig="showConfig" @add="add" @refresh="refresh" @turnPage="turnPage"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <div v-if="isShowDetail">
          <breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>
          <div class="webChatUrlDetail">
            <div class="webChatUrl_from">
              <el-form :model="webChatUrlForm" :rules="rules" ref="webChatUrlForm" label-position="top" label-width="120px">
                <el-form-item :label="$t('configLazyLoad.channel.websiteName')" class="item" prop="name">
                  <el-input :maxlength=20 v-model.trim="webChatUrlForm.name" :placeholder="$t('public.pleaseInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.msgUrl')" class="item" prop="url">
                  <el-input v-model.trim="webChatUrlForm.url" :placeholder="$t('public.pleaseInput')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.msgGroup')" class="item" prop="group">
                  <el-select v-model.trim="webChatUrlForm.group" :placeholder="$t('public.pleaseInput')">
                    <el-option
                      v-for="(item, index) in mailQueues"
                      :key="index"
                      :label="item.DisplayName"
                      :value="item.Exten">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('config.channel.ensSessionPush')">
                  <el-radio-group v-model="webChatUrlForm.resource">
                    <el-radio label="1">{{$t('public.yes')}}</el-radio>
                    <el-radio label="0">{{$t('public.no')}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item :label="$t('configLazyLoad.interfaceConfig.isSatPush')">
                  <el-radio-group v-model="webChatUrlForm.Satisfied">
                    <el-radio label="1">{{$t('public.yes')}}</el-radio>
                    <el-radio label="0">{{$t('public.no')}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="primary_btn" @click="submitForm('webChatUrlForm')">{{$t('public.save')}}</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div v-if="isShowConfig">
          <breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>
          <div style="padding: 20px 15px;">
            <div>
              <span style="width: 100px;display: inline-block">accessId：</span><el-input style="width: 280px;margin: 20px" size="mini" type="text" v-model="configAccessId" :disabled="true"></el-input> <el-button @click="copy('accessId')" size="small">{{$t('configLazyLoad.channel.copyToClip')}}</el-button>
            </div>
            <div>
              <span style="width: 100px;display: inline-block">{{$t('configLazyLoad.webChatUrl.token')}}：</span><el-input style="width: 280px;margin: 20px" size="mini" type="text" v-model="configToken" :disabled="true"></el-input> <el-button @click="copy('token')" size="small">{{$t('configLazyLoad.channel.copyToClip')}}</el-button>
            </div>
          </div>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
    </el-tabs>
  </div>
</template>

<script>
  import diyTable from '../../interfaceConfig/base/diyTable'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import Clipboard from 'clipboard-js'
  export default {
    name: 'ChannelConfigwebChatUrl',
    data () {
      return {
        activeName: 'webChatUrl',
        menu: [{name: this.$t('configLazyLoad.webChatUrl.manage'), value: 'webChatUrl'}],
        tableData: [],
        isShowDetail: false,
        isShowConfig: false,
        isShow: true,
        configAccessId: '',
        configToken: '',
        tableHeader: [
          {prop: 'name', label: this.$t('configLazyLoad.channel.websiteName')},
          {prop: 'operate', label: this.$t('public.operate')}
        ],
        titleArr: [this.$t('configLazyLoad.webChatUrl.onlineManage'), this.$t('configLazyLoad.interfaceConfig.editInterfacePage')],
        webChatUrlForm: {
          name: '',
          url: 'http://',
          group: '',
          resource: '1',
          Satisfied: '1'
        },
        rules: {
          name: [
            {required: true, message: this.$t('configLazyLoad.interfaceConfig.webChatTip1'), trigger: 'blur'}
          ],
          url: [
            {required: true, message: this.$t('configLazyLoad.webChatUrl.tips1'), trigger: 'blur'},
            {pattern: /^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/,
              message: this.$t('configLazyLoad.interfaceConfig.webChatTip2') }
          ],
          group: [
            {required: true, message: this.$t('configLazyLoad.webChatUrl.tips2'), trigger: 'blur'}
          ]
        },
        refreshLoading: false,
        addOrEdit: 'add',
        webChatId: '',
        mailQueues: '',
        countNum: 0,
        currentPage: 1,
        pageSize: 10
      }
    },
    created () {
      this.getWebChatList(1)
      this.$store.dispatch('getCache', { type: 'mailQueues' })
        .then(res => {
          this.mailQueues = res
        })
    },
    methods: {
      getWebChatList (val) {
        this.$store.dispatch('channelGetWebChatList', {limit: 10, page: val}).then(res => {
          this.countNum = res.count
          this.tableData = res.data
        })
      },
      back () {
        this.isShowDetail = false
        this.isShowConfig = false
      },
      add () {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.addInterfacePage'))
        this.addOrEdit = 'add'
        this.isShowDetail = true
        this.isShowConfig = false
        this.webChatUrlForm.group = ''
        this.webChatUrlForm.name = ''
        this.webChatUrlForm.resource = '1'
        this.webChatUrlForm.Satisfied = '1'
        this.webChatUrlForm.url = 'http://'
      },
      updata (val) {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.editInterfacePage'))
        this.addOrEdit = 'edit'
        this.webChatId = val._id
        this.isShowDetail = true
        this.isShowConfig = false
        this.webChatUrlForm.name = val.name
        this.webChatUrlForm.url = val.sendUrl
        this.webChatUrlForm.group = val.toPeer
        this.webChatUrlForm.resource = val.finishCallback
        this.webChatUrlForm.Satisfied = val.csrCallback
        this.pageSize = 10
      },
      showConfig (val) {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.configDesc'))
        console.log(val)
        this.isShowDetail = false
        this.isShowConfig = true
        this.configAccessId = val._id
        this.configToken = val.token
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.interfaceConfig.confirmDelete'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('channeldelWebChat', {_id: data._id}).then(res => {
            if (res && res.success) {
              this.getWebChatList(this.currentPage)
              this.$message({
                message: this.$t('configLazyLoad.interfaceConfig.deleteSucc'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      copy (type) {
        let self = this
        let val
        if (type === 'accessId') {
          val = this.configAccessId || ''
        } else {
          val = this.configToken
        }
        Clipboard.copy(val).then(
          function () {
            self.$message.success(self.$t('config.business.copySuccess'))
          }
        )
      },
      turnPage (val) {
        this.currentPage = val
        this.getWebChatList(val)
      },
      submitForm (val) {
        this.$refs[val].validate((valid) => {
          if (valid) {
            let data = {
              name: this.webChatUrlForm.name,
              sendUrl: this.webChatUrlForm.url,
              toPeer: this.webChatUrlForm.group,
              finishCallback: this.webChatUrlForm.resource,
              csrCallback: this.webChatUrlForm.Satisfied
            }
            if (this.addOrEdit === 'add') {
              this.$store.dispatch('channeladdWebChat', data).then(res => {
                if (res && res.success) {
                  // let lastPage = Math.ceil(this.countNum / (this.currentPage * 10))
                  this.getWebChatList(this.currentPage)
                  this.isShowDetail = false
                  this.isShowConfig = false
                  this.$message.success(this.$t('config.channel.saveSuccess'))
                }
              })
            } else {
              data._id = this.webChatId
              this.$store.dispatch('channelupdataWebChat', data).then(res => {
                if (res && res.success) {
                  this.getWebChatList(this.currentPage)
                  this.isShowDetail = false
                  this.isShowConfig = false
                  this.$message.success(this.$t('config.channel.saveSuccess'))
                }
              })
            }
          } else {
            this.$message.error(this.$t('config.channel.saveError'))
            return false
          }
        })
      },
      refresh () {
        this.refreshLoading = true
        window.setTimeout(() => {
          this.getWebChatList(this.page)
          this.refreshLoading = false
        }, 400)
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      diyTable,
      breadCrumb
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .webChatUrl
    width 300px
  .webChatUrlTable
    overflow-y: auto
    overflow-x: hidden
    width: 100%
    height: 480px
  .webChatUrlDetail
    width 250px
  .webChatUrl_from
    padding 20px
    .el-input,.el-select
      max-width 220px
  .item
    margin-bottom 20px
</style>
